
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">
	<ui:define name="body">
		<h:form>
			<a4j:region>
				<p><a4j:commandLink id="conference"
					binding="#{initiateConference.conference}"
					action="#{initiateConference.startConference}"
					value="Start Conference" rendered="true"
					reRender="conference,addmembers,memberslist"
					oncomplete="document.getElementById('addmembers').style.display='block'" /></p>

				<div id="addmembers" style="display: none">
				<p><rich:panel style="width:620px;">
					<f:facet name="header">
						<h:outputText value="Add conference members" />
					</f:facet>
					<h:panelGrid columns="2">
						<h:outputText value="Name: " />
						<rich:inplaceInput defaultLabel="Enter a conference name"
							showControls="true" />
						<h:outputText value="Send conference invite to: " />
						<h:inputText id="conferencemember"
							value="#{initiateConference.member}" />
						<a4j:commandLink id="addmember"
							action="#{initiateConference.addMemberToConference}" value="Add"
							reRender="conferencemember,memberslist"
							oncomplete="document.getElementById('conferencemember').value=''" />
					</h:panelGrid>
				</rich:panel></p>

				<p><rich:dataTable id="memberslist"
					value="#{initiateConference.members}" var="mem">
					<f:facet name="header">
						<h:outputText value="List of users currently in conference" />
					</f:facet>
					<rich:column>
						<f:facet name="header"> Member Name </f:facet>
						<h:outputText value="#{mem}" />
					</rich:column>
					<rich:column id="actions">
						<f:facet name="header"> Actions </f:facet>
						<a4j:commandLink ajaxSingle="true" id="removemember"
							oncomplete="#{rich:component('removePanel')}.show()"
							value="Remove">
							<a4j:actionparam name="currentMember" value="#{mem}"
								assignTo="#{initiateConference.currentMember}" />
						</a4j:commandLink>
					</rich:column>
				</rich:dataTable></p>
				</div>
			</a4j:region>
		</h:form>


		<rich:modalPanel id="removePanel" autosized="true" width="200">
			<f:facet name="header">
				<h:outputText value="Remove this member from conference"
					style="padding-right:15px;" />
			</f:facet>

			<h:form>
				<table width="100%">
					<tbody>
						<tr>
							<td align="center" width="50%"><a4j:commandButton
								value="Yes" ajaxSingle="true"
								action="#{initiateConference.removeMember}"
								oncomplete="#{rich:component('removePanel')}.hide();"
								reRender="memberslist" /></td>
							<td align="center" width="50%"><a4j:commandButton
								value="Cancel"
								onclick="#{rich:component('removePanel')}.hide();return false;" />
							</td>
						</tr>
					</tbody>
				</table>
			</h:form>
		</rich:modalPanel>
		<a4j:status onstart="#{rich:component('wait')}.show()"
			onstop="#{rich:component('wait')}.hide()" />
		<rich:modalPanel id="wait" autosized="true" width="200" height="120"
			moveable="false" resizeable="false">
			<f:facet name="header">
				<h:outputText value="Processing" />
			</f:facet>
			<h:outputText value="Wait Please..." />
		</rich:modalPanel>
	</ui:define>
</ui:composition>